<style scoped="scoped">
	html {
		background-color: #f1f1f1;
	}

	body {
		background-color: #f1f1f1;
	}

	.PlanDetails header {
		font-size: 18px;
		background-color: #2A71C8;
		color: white;
		text-align: center;
		color: #FFFFFF;
		padding: 3% 0;
	}

	.PlanDetails header img {
		float: left;
		width: 5%;
		margin: 1% 0 0 2%;
	}

	.planwrap {
		background-color: #2A71C8;
		height: 110px;
	}

	.PlanDetails .details .plandiv {
		width: 90%;
		background: rgba(255, 255, 255, 1);
		border-radius: 4px;

		margin: auto;
		text-align: left;
		font-size: 16px;
		z-index: 999;
		overflow: hidden;
	}

	.PlanDetails .BankLogo {
		background: #fff;
		border-radius: 50%;
		position: relative;
		top: 4px;
	}

	.PlanDetails .BankTitle {
		/* float: left;
		margin: 1.8% 2%;
		font-size: 16px; */
		margin-left: 6px;
		display: inline-block;font-size: .3rem;
	}

	.PlanDetails .BankState {
		float: right;
		margin-right: 2%;
		margin-top: 3px;
		line-height: 32px;
		width: 30%;
	}

	.PlanDetails .icolo {
		display: inline-block;
		width: 10px;
		height: 10px;

		margin-right: 5%;
		margin-top: 5%;
		border-radius: 50%;
	}

	.PlanDetails .BankSurplus {
		width: 100%;
		text-align: center;
	}

	.PlanDetails .BankSurplusP {
		font-size: 14px;
		/* margin-top: 10px; */
		font-family: PingFang-SC-Regular;
		color: rgba(177, 190, 214, 1);
	}

	.PlanDetails .BankSurplusP1 {
		font-size: 28px;
		/* padding: 5px 0 10px 0; */
		font-family: PingFang-SC-Bold;
		color: rgba(74, 122, 211, 1);
	}

	.PlanDetails .BankSurplusP2 {
		color: rgba(177, 190, 214, 1);
		font-size: 16px;
	}

	.PlanDetails .BankSurplus hr {
		height: 1px;
		background: rgba(230, 234, 243, 1);
		border: none;
	}

	.Total {
		float: left;
		width: 33.3%;
		font-size: 16px;
		border-right: 1px solid #E6EAF3;
		margin: 5% 0;
	}

	.TotalTex1 {
		font-size: 14px;
		color: #C1C1C1;
	}

	.TotalTex2 {
		font-size: 19px;
		color: #303030;
	}

	.procedures {
		float: right;
		width: 33.3%;
		margin-top: 5%;
		font-size: 16px;
	}

	.procedures img {
		position: relative;
		top: 4%;
	}

	.procedures1 {
		color: #6D89BD;
		font-size: 16px;
	}

	.procedures2 {
		color: #4A7AD3;
		font-size: 16px;
	}

	.bianhao {
		text-align: left;
		background: rgba(177, 193, 224, 1);
		border-radius: 0rem 0 1rem 1rem;
		font-size: 16px;
		font-family: PingFang-SC-Regular;
		color: rgba(255, 255, 255, 1);
	}

	.bianhao p {
		margin-left: 5%;
	}

	.kk {
		/* background: #fff; */
		border-radius: 10px;
		margin: 0 auto;
		width: 90%;
	}

	.kk .unbhr {
		text-align: center;
		display: inline-block;
		margin: auto;
		position: relative;
		bottom: -10%;
		background-color: #fcfcfc;
		font-family: PingFang-SC-Regular;
		color: rgba(168, 168, 168, 1);
	}

	.bill {
		padding-bottom: 5%;
		list-style-type: none;
		text-align: center;
		font-size: 14px;
		margin: auto;
	}

	.bill li {
		text-align: left;
		border-bottom: 1px solid #F2F2F2;
		/* padding: 0 10px; */
		line-height: 18px;
	}

	.bill .tex1 {
		/* padding-top: 3%; */
		margin: 3% 0;
		color: black;
	}

	

	.bill .tex2 {
		font-family: PingFangSC-Regular;
		color: rgba(140, 140, 140, 1);
		margin: 3% 0;
	}

	.bill .tex2 span:last-child {
		float: right;
		font-family: PingFangSC-Regular;
		color: rgba(140, 140, 140, 1);
	}
	/* .bill .tex2 .spa1{
		float: right; 
		color: rgba(140, 140, 140, 1);
	} */
	.inp {
		clear: both;
		margin-top: 0rem;
	}

	.res {
		float: left;
		background: rgba(42, 113, 200, 1);
		border-radius: 5px;
		text-align: center;
		border: none;
		color: white;
		width: 120px;
		height: 42px;
		font-size: 18px;
		margin-top: 5%;
	}

	.get {
		float: right;
		background: rgba(42, 113, 200, 1);
		border-radius: 5px;
		text-align: center;
		border: none;
		color: white;
		padding: 2% 3%;
		margin-right: 6rem;
	}

	.opt {
		margin-top: 0px;
		outline: none;
		/*border: 1px solid #BBBBBB;*/
		border-radius: 4px;
		position: relative;
		height: 40px;
		-webkit-appearance: none;
		appearance: none;
		border: none;
		font-size: 18px;
		padding: 0px 10px;
		display: block;
		width: 100%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background-color: #FFFFFF;
		color: #333333;
		border-radius: 4px;
	}

	.xlcon {
		display: inline-block;
		width: 160px;
		float: right;
		font-size: 14px;
		text-align: right;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}

	.BankState {
		float: right;
		margin-right: 5%;
		font-size: 16px;
	}

	.icolorred {
		display: inline-block;
		width: 20px;
		height: 20px;
		float: left;
		margin-right: 5%;
		margin-top: 5%;
		background: rgba(106, 196, 125, 1);
		border-radius: 50%;
	}

	.icoloryellow {
		background-color: #F49D57;
		display: inline-block;
		width: 20px;
		height: 20px;
		float: left;
		margin-right: 5%;
		margin-top: 5%;
		border-radius: 50%;
	}

	.icoloryc {
		display: inline-block;
		width: 20px;
		height: 20px;
		float: left;
		margin-right: 5%;
		margin-top: 5%;
		border-radius: 50%;
		background: red;
	}
	.cleirce{
		display: inline-block;
		height: 13px;
		width: 13px;
		border-radius: 50%;
		margin-right: 5px;
		position: relative;
		top: 2px;
	}
	.clecly{
		width: 5px;
		border-radius: 50%;
		height: 5px;
		display: inline-block;
		margin-right: 2px;
	}
</style>
<template>
	<div class="PlanDetails">
		<header><img @click="goBack" src="http://hstatic.1818pay.cn/image/icon/left.png" /><span>方案详情</span></header>
		<div class=" details" style="height:100%;background:#f2f2f2;padding-top: 23px;">
			
			<div class="plandiv">
				<div style='display: flex;justify-content: space-between; width: 100%;background:#4F8BF4;'>
					<div style=" color: #fff;width:90%;margin:5px auto;" >
						<div style="display: inline-block;width:46.5%">
							<img class="BankLogo" :src='this.$route.params.creditCard.issuingBank | fmtBankimsrc' />
							<div class="BankTitle" >
								<p style='font-size: 14px;'>{{creditCard.issuingBank | fmtBankCode}}({{creditCard.cardNumber | fmtCardNo }})</p>
							</div>
						</div>
						<div style="display: inline-block;width:7%">
							<img style="width: 20px;height:20px;position: relative; top: 4px;" src="http://hstatic.1818pay.cn/image/icon/dae/yulan_dao@3x.png" alt="">
						</div>
						<div style="display: inline-block;width:46.5%;text-align: right;">
							<img class="BankLogo" :src='scdata.bankCode | fmtBankimsrc' />
							<div class="BankTitle">
								<p style='font-size: 14px;'>{{scdata.bankCode | fmtBankCode}}({{scdata.cardNo | fmtCardNo }})</p>
							</div>
						</div>
					</div>
				</div>
				<div style="clear: both;"></div>
				<div class="BankSurplus">
					<div class="Total">
						<p class="TotalTex1"> 预留金额(元)</p>
						<p class="TotalTex2">{{(creditCard.plan.basicAmount/100)}}</p>
					</div>
					<div class="Total">
						<p class="TotalTex1"> 到账总额(元)</p>
						<p class="TotalTex2">{{creditCard.plan.totalAmount/100}}</p>
					</div>
					<div class="Total">
						<p class="TotalTex1">手续费(元)&nbsp;&nbsp;
							<!-- <img src="http://hstatic.1818pay.cn/image/icon/xinxi.png" /> -->
						</p>
						<p class="TotalTex2"> {{creditCard.plan.totalFee/100}}</p>
					</div>
					<div style="clear: both;"></div>
					<p style="background-color: #F3F7FB;  padding: 1% 5%; text-align: left; color: #7F90B0; font-size: 14px;">方案编号:{{creditCard.plan.pId}}
						<span v-if="creditCard.plan.state==2" style="color: #467BE7;float: right;"><span class='cleirce' style="background:#467BE7;"></span>待执行</span>
						<span v-if="creditCard.plan.state==4" style="color: #EB793A;float: right;"><span class='cleirce' style="background:#EB793A;"></span>手动中断</span>
						<span v-if="creditCard.plan.state==6" style="color: #52A741;float: right;"><span class='cleirce' style="background:#52A741;"></span>完成</span>
					</p>
				</div>
			</div>
			
			<div style="clear: both;"></div>
			<div style="margin: 0 auto;width:100%;background: #fff;margin-top:1rem;">
				<div class="kk">
					<div style="font-size: .7rem; border-radius: 10px 10px 0 0; color: #7E8186; padding: 5px 0;">方案时间：{{creditCard.plan.timeStampStr | fmtDate2}}
						<div style=" float: right;">
							<img style="width: 13px; position: relative; top: 3px;" src="http://hstatic.1818pay.cn/image/icon/dae/weizhi@3x.png" alt="">
							{{city}}
						</div>
					</div>
					<ul class="bill" v-if="items.length!=0">
						<li v-for="item in items">
							<div v-if="item.payType==2" style="    display: flex;align-items: center;">
								<p style="display: inline-block;"><img style="    width: 37px;" src="http://hstatic.1818pay.cn/image/icon/dae/xiaofei@3x.png" alt=""></p>
								<div style="flex: 1;font-size: .7rem;margin-left: 6px;">
									<p class="tex1">消费{{item.amount/100}}元<span style='color:#949494;'>(包含手续费{{item.fee / 100}}元)</span>
										<!--  -->
										<span v-if="item.state==2" style="color: #467BE7;float: right;" > <span class="clecly" style='background:#467BE7'></span>待执行</span>
										<span v-if="item.state==4" style="color: #EB793A;float: right;" > <span class="clecly" style='background:#EB793A' />手动中断</span>
										<span v-if="item.state==5" style="color: #52A741;float: right;" > <span class="clecly" style='background:#52A741' />交易中</span>
										<span v-if="item.state==6&&item.payState==3" style="color: #52A741;float: right;" > <span class="clecly" style='background:#52A741' />成功</span>
										<span v-if="item.state==6&&item.payState==4" style="color: #CC352A;float: right;" > <span class="clecly" style='background:#CC352A' />失败</span>
										<div style="clear: both;"></div>

									</p>
									<p class="tex2">{{item.bankCode | fmtBankCode}}【{{item.cardNo|fmtCardNo}}】<span>{{item.executeTime | fmtDate}}</span></p>
									<p v-if="item.state==6&&item.payState==4" style="color:black">失败原因:<span style="color:red">{{item.cause}}</span></p>
								</div>
							</div>
							<div v-if="item.payType==1" style="    display: flex;align-items: center;">
								<p><img style="    width: 37px;" src="http://hstatic.1818pay.cn/image/icon/dae/ruzhang@3x.png" alt=""></p>
								<div style="flex: 1;font-size: .7rem;margin-left: 6px;">
									<p class="tex1">到账{{item.amount/100}}元&nbsp;
										<span v-if="item.state==2" style='color:#949494;'>(包含手续费{{item.fee / 100}}元)</span>
										<span v-else style='color:#949494;'>{{item.bankCode | fmtBankCode}}【{{item.cardNo|fmtCardNo}}】</span>
										<span v-if="item.state==2" style="color: #467BE7;float: right;" > <span class="clecly" style='background:#467BE7'></span> 待执行</span>
										<span v-if="item.state==4" style="color: #EB793A;float: right;" > <span class="clecly" style='background:#EB793A'></span>手动中断</span>
										<span v-if="item.state==5" style="color: #52A741;float: right;" > <span class="clecly" style='background:#52A741'></span>交易中</span>
										<span v-if="item.state==6&&item.repaymentState==3" style="color: #52A741;float: right;" > <span class="clecly" style='background:#52A741'></span>成功</span>
										<span v-if="item.state==6&&item.repaymentState==4" style="color: #CC352A;float: right;"> <span class="clecly" style='background:#CC352A'></span>失败</span>
										<div style="clear: both;"></div>
									</p>
									<p class="tex2" v-if='item.state==2' >{{item.bankCode | fmtBankCode}}【{{item.cardNo|fmtCardNo}}】<span>{{item.executeTime | fmtDate}}</span></p>
									<p class="tex2" v-else><span v-if="item.state==6&&item.repaymentState==3" style="color:#EE9565;">(实到账{{item.arrivalAmount / 100}}元,含手续费{{item.fee/100}}元)</span><span>{{item.executeTime | fmtDate}}</span></p>
									<p v-if="item.state==6&&item.repaymentState==4" style="color:black">失败原因:<span style="color:red">{{item.cause}}</span></p>
								</div>
							</div>
						</li>
					</ul>
					
				</div>
			</div>

		</div>

		<div style="clear: both;"></div>

	</div>
</template>

<script>
 
	import AreaList from './are';
	export default {
		data() {
			return {
				xlxzshow: false,
				value: '',
				yhlogo: '',
				yhsrc: '',
				jdt: 2000,
				zje: '请输入到账金额',
				items: [],
				creditCard: [],
				planJsonKey: '',
				scdata:{}, //储蓄卡
				city:'', //位置
			};
		},
		created: function () {
			console.log(this.$route.params.creditCard)
			this.res = this.$route.params.res;
			this.creditCard = this.$route.params.creditCard;
			this.items = this.res.list
			this.$Spin.hide();
			// console.log(this.$route.params.res)
			this.city=this.$route.params.res.list[0].city
			// console.log(this.items);
			for(let i=0;i<this.items.length;i++){
				if(this.items[i].payType==1){
					// console.log(111)
					this.scdata=this.items[i]
					return
				}
			}
			// 
		},
		filters: {
			fmtcity: function (city) {

				return AreaList.city_list[city]
			},
			fmtMcc: function (mcc) {
				var mccname = {
					'5094': "贵重珠宝、首饰，钟表零售",
					"5211": "木材和各类建材卖场",
					"5311": "百货商店",
					"5641": "婴儿、儿童服装店",
					"5651": "家庭服装商店",
					"5691": "成人成衣店",
					"5712": "家具、家庭摆品、家用设备零售商",
					"5719": "各种家庭装饰专营店",
					"5732": "电子设备商店",
					"5812": "餐厅酒楼",
					"5813": "夜店酒吧",
					"5912": "药店药房",
					"5921": "瓶装酒零售店",
					"5970": "工艺美术商店",
					"5977": "化妆品商店",
					"7011": "酒店宾馆",
					"7230": "美发",
					"7278": "购物服务及会所",
					"7297": "足浴spa",
					"7298": "美容",
					"7538": "汽车服务商店",
					"7911": "歌舞厅ktv",
					"7932": "台球撞球场所",
					"7933": "保龄球会馆",
					"7992": "公共高尔夫球场",
					"7996": "游乐园，马戏团，嘉年华",
					"7997": "健身私人高尔夫课程，私人俱乐部",
					"8912": "装修装潢园艺"
				}
				return mccname[mcc]
			},
			fmtBankimsrc: function (imgsrc) {
				return 'http://hstatic.1818pay.cn/image/banklogo/' + imgsrc + '.png'
			},
			fmtBankCode: function (bankCode) {
				if (typeof (bankCode) != 'undefined') {

					var yhname = {
						'ICBC': "工商银行",
						'ABC': "农业银行",
						'BOC': "中国银行",
						'CCB': "建设银行",
						'CMBCHINA': "招商银行",
						'POST': "邮政储蓄",
						'ECITIC': "中信银行",
						'CEB': "光大银行",
						'BOCO': "交通银行",
						'CIB': "兴业银行",
						'CMBC': "民生银行",
						'PINGAN': "平安银行",
						'CGB': "广发银行",
						'HXB': "华夏银行",
						'SPDB': "浦发银行",
						'SHB': "上海银行",
						'CBHB': "渤海银行",
						'JSB': "江苏银行"
					}
					return yhname[bankCode]

				}

			},
			fmtCardNo: function (cardNo) {
				return (cardNo + '').slice((cardNo + '').length - 4);
			},
			fmtDate: function (time) {
				time = new Date(time)
				var year=time.getFullYear(time)
				var month = time.getMonth(time) + 1 < 10 ? "0" + (time.getMonth() + 1) : time.getMonth() + 1, //月份是从0开始的
					day = time.getDate(time) < 10 ? "0" + time.getDate() : time.getDate(),
					hour = time.getHours(time) < 10 ? "0" + time.getHours() : time.getHours(),
					min = time.getMinutes(time) < 10 ? "0" + time.getMinutes() : time.getMinutes()

				time = year+'-'+month + '-' + day +' ' + hour + ':' + min
				return time;
			},
			fmtDate2:function(time){
				// console.log(time)
				var list = time.split(',')
				console.log(list)
				var create = null
				var end = null
				for(var i=0;i<list.length;i++){
					// console.log(111)
					var listitem= new Date(parseInt(list[i]))
					var year=listitem.getFullYear(listitem)
					var month = listitem.getMonth(listitem) + 1 < 10 ? "0" + (listitem.getMonth() + 1) : listitem.getMonth() + 1, //月份是从0开始的
					day = listitem.getDate(listitem) < 10 ? "0" + listitem.getDate() : listitem.getDate(),
					hour = listitem.getHours(listitem) < 10 ? "0" + listitem.getHours() : listitem.getHours(),
					min = listitem.getMinutes(listitem) < 10 ? "0" + listitem.getMinutes() : listitem.getMinutes();
					// console.log(year + '/' + month + '/' + day  )
					if(i==0){
						create = year + '/' + month + '/' + day 
					}
					if(i==list.length-1){
						end	= year + '/' + month + '/' + day 
					}
					
				}
				return create + '~' + end;
			},
			fmtState: function (pd) {
				if (pd.state == 1) {
					return "待执行";
				}
				if (pd.state == 2) {
					return "执行中";
				}
				if (pd.state == 4) {
					return "手动中断";
				}
				if (pd.state == 5) {
					return "交易中";
				}
				if (pd.state == 6) {
					if (pd.payType == 1) {
						if (pd.repaymentState == 3) {
							return "成功";
						} else {
							return "失败";
						}
					} else {
						if (pd.payState == 3) {
							return "成功";
						} else {
							return "失败";
						}
					}

				}
			}

		},
		methods: {
			goBack() {
				this.$router.push({
					name: 'index',
				})
			}

		}

	}
</script>